<template>
  <div ref="canvasOperateContentRef" class="msg-content">
    <template v-for="(item, index) in canvasOperate" :key="index">
      <div class="msg-item">
        <div>{{ item.time }}</div>
        <div v-if="item?.source" style="color: #64d7d7dd">【{{ item.source }}】</div>
        <div :style="{ color: '#999' }">
          <span>{{ item.content }}</span>
          <span v-if="item?.otherMsg">{{ '【' + item.otherMsg + '】' }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useMessageStore } from '@renderer/store/message/message'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'

const messageStore = useMessageStore()
const { canvasOperate, canvasOperateContentRef, activeTab } = storeToRefs(messageStore)

onMounted(() => {
  if (canvasOperateContentRef.value) {
    canvasOperateContentRef.value.scrollTop = canvasOperateContentRef.value.scrollHeight
  }
})
</script>

<style scoped lang="scss">
.msg-content {
  height: calc(100% - 40px);
  padding: 5px;
  overflow-y: auto;

  /* 设置滚动条样式 */
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cccccc85;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #aaaaaa85;
  }

  .msg-item {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 7px;
    color: #999;
    font-size: $font-size-small;

    .msg-item-count {
      color: $delta-color-lan;
    }
  }
}
</style>
